<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="btnBox">
                <div>
                    <span>商品：</span>
                    <el-input size="small" v-model="searchProductName" placeholder="请输入商品名称" />
                </div>
                <div>
                    <span>商品类别：</span>
                    <el-cascader placeholder="请选择商品分类" size="small" v-model="selectClassify" :options="classifyList"
                        :props="props" @change="selectProClassify"></el-cascader>
                </div>
                <div>
                    <span>商品类型：</span><el-select v-model="selectProductType" placeholder="请选择" size="small">
                        <el-option label="全部" value=''> </el-option>
                        <el-option label="普通商品" value='0'> </el-option>
                        <el-option label="钻石商品" value='1'> </el-option>
                    </el-select>
                </div>
                <div>
                    <span>状态：</span><el-select v-model="selectStatus" placeholder="请选择" size="small">
                        <el-option label="全部" value=''> </el-option>
                        <el-option label="上架中" value='1'> </el-option>
                        <el-option label="已下架" value='0'> </el-option>
                    </el-select>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-search" @click="getProductList">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="reshandle()">重置</el-button>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-upload2" @click="handle('up', 'top')">上架</el-button>
                    <el-button size="small" icon="el-icon-download" @click="handle('down', 'top')">下架</el-button>
                </div>
            </div>

            <el-table :data="tableData" border style="width: 100%" height="626" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="商品图片" width="120">
                    <template slot-scope="prop">
                        <el-image :src="prop.row.productImage" class="image-control"
                            :previewSrcList="[prop.row.productImage]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="productId" label="商品编号" width="90"></el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column label="商品类别">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.productKind == '0'">普通商品</el-tag>
                        <el-tag size="small" type="success" v-else-if="scope.row.productKind == '1'">钻石商品</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="商品标识">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.productSaleType == '1'">常规商品</el-tag>
                        <el-tag size="small" type="success" v-else-if="scope.row.productSaleType == '2'">热卖商品</el-tag>
                        <el-tag size="small" type="danger" v-else-if="scope.row.productSaleType == '0'">滞销商品</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="商品分类">
                    <template slot-scope="scope">
                        {{ scope.row.categoryOneName }}-{{ scope.row.categoryTwoName }}
                    </template>
                </el-table-column>
                <el-table-column prop="factoryName" label="厂商"></el-table-column>
                <el-table-column prop="brandName" label="品牌商"></el-table-column>
                <el-table-column prop="productSales" label="销量"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.productStatus == '1'">销售中</el-tag>
                        <el-tag size="small" type="info" v-else-if="scope.row.productStatus == '0'">已下架</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="360">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-tickets"
                            @click="handle('detail', 'table', scope.row)">详情</el-button>
                        <el-button size="small" icon="el-icon-upload2" v-if="scope.row.productStatus == 0"
                            @click="handle('up', 'table', scope.row)">上架</el-button>
                        <el-button size="small" icon="el-icon-download" @click="handle('down', 'table', scope.row)"
                            v-if="scope.row.productStatus == 1">下架</el-button>
                        <el-button size="small" icon="el-icon-document"
                            @click="handle('data', 'table', scope.row)">统计</el-button>
                        <el-button size="small" icon="el-icon-edit"
                            @click="handle('edit', 'table', scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 150]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>
        </el-card>

        <!-- 商品详情 -->
        <el-dialog title="商品详情" :visible.sync="detailDia" width="50%" top="3vh" :before-close="closeDetailDialog">
            <div class="detailBox">
                <div class="detailTop">
                    <span>
                        商品编号：{{ productDetail.productId }}
                    </span>

                    <span>
                        品名：{{ productDetail.productName }}
                    </span>
                </div>

                <div class="ProCon">
                    <div>轮播图</div>
                    <div>
                        <template v-if="productDetail.lunboImage.length != 0">
                            <el-image v-for="(item, index) in productDetail.lunboImage" :key="index" :src="item.image"
                                class="image-control" :previewSrcList="[item.image]"></el-image>
                        </template>
                        <div v-else class="noTip">暂无轮播图</div>
                    </div>
                </div>

                <div class="ProCon">
                    <div>视频</div>
                    <div>
                        <template v-if="productDetail.productVideo != null">
                            <video :src="productDetail.productVideo" controls></video>
                        </template>
                        <div v-else class="noTip">暂无轮播图</div>
                    </div>
                </div>

                <div class="ProCon">
                    <div>详情图</div>
                    <div>
                        <template v-if="productDetail.detailImage.length != 0">
                            <el-image v-for="(item, index) in productDetail.detailImage" :key="index" :src="item.image"
                                class="image-control" :previewSrcList="[item.image]"></el-image>
                        </template>
                        <div v-else class="noTip">暂无详情图</div>
                    </div>
                </div>
                <div class="ProCon">
                    <div>规格</div>
                    <div>
                        <el-table :data="productDetail.productFormat" border style="width: 100%">
                            <el-table-column label="图片" width="80">
                                <template slot-scope="prop">
                                    <el-image :src="prop.row.productImage" class="image-control1"
                                        :previewSrcList="[prop.row.productImage]"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="formatName" label="规格名"></el-table-column>
                            <el-table-column prop="productPrice" label="单价"></el-table-column>
                            <el-table-column prop="productNum" label="库存"></el-table-column>
                            <el-table-column prop="productScore"
                                :label="productDetail.productKind == 0 ? '积分' : '钻石'"></el-table-column>
                            <el-table-column prop="productNumWarnimg" label="库存阈值"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="proInfo">
                    <div>
                        <span>分类</span>
                        {{ productDetail.categoryOneName }}-{{ productDetail.categoryTwoName }}
                    </div>
                    <div>
                        <span>厂商</span>
                        {{ productDetail.factoryName }}
                    </div>
                    <div>
                        <span>品牌</span>
                        {{ productDetail.brandName }}
                    </div>
                    <div>
                        <span>类别</span>
                        {{ productDetail.productKind == 0 ? '普通商品' : '钻石商品' }}
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 商品统计 -->
        <el-dialog title="商品统计" :visible.sync="dataDia" width="50%" top="15vh" :before-close="closeDataDialog">
            <div class="detailBox">
                <div class="detailTop">
                    <span>
                        商品编号：{{ productDetail.productId }}
                    </span>
                    <span>
                        品名：{{ productDetail.productName }}
                    </span>
                </div>
                <div class="infoBox">
                    <div>
                        总销量：<span>{{ productDetail.totalNum }}</span>件
                    </div>
                    <div>
                        总销售额：<span>{{ productDetail.totalMoney }}</span>元
                    </div>
                </div>
                <div class="ProCon">
                    <div>所有订单</div>
                    <div>
                        <el-table :data="productDetail.orderList" border style="width: 100%">
                            <el-table-column prop="productNum" label="销量"></el-table-column>
                            <el-table-column prop="price" label="单价"></el-table-column>
                            <el-table-column prop="totalPrice" label="总价"></el-table-column>


                            <!-- 
                            <el-table-column prop="product_name" label="收货人"></el-table-column>
                            <el-table-column prop="product_name" label="收货电话"></el-table-column>
                            <el-table-column prop="product_name" label="收货地址"></el-table-column>
                            <el-table-column prop="product_name" label="下单时间"></el-table-column>
                            <el-table-column prop="product_name" label="付款时间"></el-table-column>
                            <el-table-column prop="product_name" label="付款金额"></el-table-column>
                            <el-table-column prop="product_name" label="使用积分"></el-table-column>
                            <el-table-column prop="product_name" label="订单状态">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.payStatus == 1">已支付</el-tag>
                                    <el-tag type="warning">未支付</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="product_name" label="发货状态">
                                <template slot-scope="scope">
                                    <el-tag type="success" v-if="scope.row.sendStatus == 1">已发货</el-tag>
                                    <el-tag type="warning">未发货</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="product_name" label="快递单号"></el-table-column>
                            <el-table-column prop="product_name" label="快递公司"></el-table-column>
                            <el-table-column prop="product_name" label="物流单号"></el-table-column>
                            <el-table-column prop="product_name" label="发货操作人"></el-table-column> -->
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { getProductListByCompanyId, getProductById, getProductCountInfo, offProduct } from '../../network/product'
import { getProductCategory } from '../../network/classify'
export default {
    data() {
        return {
            tableData: [{
                productName: '商品名'
            }],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,

            searchProductName: '', //搜索的商品名
            selectStatus: '',  // 状态
            selectClassify: [],  // 分类
            selectProductType: '',  // 商品类型
            classifyList: [], //分类列表

            props: {
                expandTrigger: 'hover',
                value: 'productCategoryId',
                label: 'categoryName',
                lazy: true,
                lazyLoad: (node, resolve) => {
                    const { level } = node;
                    console.log(level);
                    if (level == 1) {
                        this.getChild(node.value).then((res) => {
                            resolve(res);
                        });
                    } else {
                        resolve();
                    }
                },
            },

            detailDia: false, // 详情弹窗
            formatList: [],
            selectList: [],// 选择的商品
            productDetail: { // 商品详情
                lunboImage: [],
                detailImage: [],
            },



            dataDia: false, // 商品统计弹窗
            orderList: [],//商品统计数据

        };
    },
    methods: {


        getProductList() {
            console.log(this.searchProductName);
            console.log(this.selectStatus);
            console.log(this.selectClassify);
            console.log(this.selectProductType);

            getProductListByCompanyId({
                companyId: sessionStorage.companyId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                productName: this.searchProductName,
                productStatus: this.selectStatus,
                productKind: this.selectProductType,
                categoryOneId: this.selectClassify[0] || '',
                categoryTwoId: this.selectClassify[1] || '',
                categorythreeId: this.selectClassify[2] || '',
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.tableData = res.data.list
                    this.totalNum = res.data.total
                }
            })
        },

        reshandle() {
            this.pageSize = 50
            this.pageNum = 1
            this.searchProductName = ''
            this.selectStatus = ''
            this.selectProductType = ''
            this.selectClassify = []
            this.getProductList()
        },


        // 选择商品类别
        selectProClassify(value) {
            console.log(value);
            this.selectClassify = value
        },


        handle(flag, position, obj) {
            if (position == 'top' && this.selectList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }
            if (position == 'top') {
                var ids = '';
                this.selectList.forEach(ele => {
                    ids += ele.productId + ','
                })
                console.log(ids);
                offProduct({
                    productIdList: ids,
                    type: flag == 'up' ? 1 : 0,
                }).then(res => {
                    if (res.flag) {
                        this.$message.success('操作成功')
                        this.getProductList()
                    } else {
                        this.$message.warning('操作失败')
                    }
                })
            } else {
                if (flag == 'detail') {
                    getProductById({
                        productId: obj.productId
                    }).then(res => {
                        if (res.flag) {
                            console.log(res);
                            this.productDetail = res.data
                            this.detailDia = true
                        }
                    })
                } else if (flag == 'data') {
                    // 统计
                    this.productDetail = obj
                    getProductCountInfo({
                        productId: obj.productId
                    }).then(res => {
                        if (res.flag) {
                            console.log(res.data);
                            var totalNum = 0, totalMoney = 0;
                            res.data.forEach(item => {
                                totalNum += item.productNum
                                totalMoney += item.totalPrice
                            })
                            this.productDetail.totalNum = totalNum
                            this.productDetail.totalMoney = totalMoney
                            this.productDetail.orderList = res.data
                            this.productDetail.detailImage = []
                            this.productDetail.lunboImage = []

                            console.log(this.productDetail);


                            this.dataDia = true
                        }
                    })

                } else if (flag == 'edit') {
                    // 编辑
                    console.log(obj);
                    window.sessionStorage.setItem('activePath', '/addProduct')
                    this.$router.push({
                        path: "/addProduct",
                        query: { id: obj.productId },
                    });
                } else {
                    offProduct({
                        productIdList: obj.productId,
                        type: flag == 'up' ? 1 : 0,
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getProductList()
                        } else {
                            this.$message.warning('操作失败')
                        }
                    })

                }
            }
        },

        selectChange(val) {
            this.selectList = val
        },


        handleSizeChange(val) {
            this.pageSize = val;

            this.getProductList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getProductList()
        },

        // 关闭详情弹窗
        closeDetailDialog() {
            this.detailDia = false
        },
        closeDataDialog() {
            this.dataDia = false
        },

        getClassifyList() {
            getProductCategory({
                parentId: 0,
                companyId: sessionStorage.companyId,
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    var list = res.data
                    this.classifyList = res.data
                    console.log(this.classifyList);
                }
            })
        },
        getChild(id) {
            return new Promise((resolve) => {
                getProductCategory({
                    parentId: id || 0,
                    companyId: sessionStorage.companyId,
                }).then(res => {
                    if (res.flag) {
                        console.log(res);
                        var list = res.data
                        resolve(list);
                    }
                })
            });
        },
    },
    created() {
        this.getClassifyList()
        this.getProductList()
    },
    filters: {

    },
};
</script>

<style scoped>
.paginationBox {
    display: flex;
    align-content: center;
    justify-content: end;
    width: 100%;

}

.image-control {
    width: 80px;
    height: 80px;
}

.detailBox {
    width: 100%;
    max-height: 80vh;
    /* background: #f2f2f2; */
    color: #333;
    overflow-y: scroll;

}

.detailBox::-webkit-scrollbar {
    display: none;
}

.detailTop {
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    font-size: 16px;
    /* font-weight: bold; */
    border-bottom: 5px solid #F1F2F6;
}

.detailTop>span {
    margin-right: 24px;
}

.ProCon {
    padding-bottom: 24px;
    margin-top: 24px;
    border-bottom: 5px solid #F1F2F6;
}

.ProCon:last-child {
    border-bottom: none;
}

.ProCon>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    font-weight: bold;
}

.ProCon>div>.el-image {
    margin: 16px 16px 0 0;
    width: 60px;
    height: 60px;
    background: #999;
    border-radius: 12px;
}

.ProCon>div>video {
    margin: 16px 16px 0 0;
    width: 100px;
    height: 100px;
    background: #999;
    border-radius: 12px;
}

.ProCon>div>.el-table {
    margin-top: 16px;
}

.noTip {
    margin-top: 16px;
    font-size: 14px;
    color: #999;
    font-weight: 400;
}

.image-control1 {
    width: 50px;
    height: 50px;
}

.proInfo>div {
    padding: 12px 0;
}

.proInfo>div>span {
    margin-right: 14px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
}


.ProCon>div:first-child::before {
    margin-right: 10px;
    content: '';
    width: 4px;
    height: 16px;

    background: #3E68FF;
    border-radius: 2px;
    border: 1px solid #3E68FF;


}

.infoBox {
    padding-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.infoBox>div {
    margin-right: 24px;
}

.infoBox>div>span {
    margin-right: 6px;
    font-size: 22px;
    font-weight: bold;
}

.btnBox>div>span {
    min-width: 50px;
    display: inline-block;
    font-size: 14px;
}
</style>